<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 展示容器 -->
            <router-link to="/login">login</router-link>
            <router-link to="/register">register</router-link>
            <router-view></router-view>
           

        </div>
        <script>

            var login = {
                template: '<h1>login</h1>'
            }

            var register = {
                template: '<h1>register</h1>'
            }

            const router = new VueRouter({
                routes: [
                    { path: '/login', component: login },
                    { path: '/register', component: register }
                ],
            })

            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods:{

                },
                router,
                watch: {
                    '$route.path': function(newVal) {
                        // console.log(newVal)
                        if (newVal === '/login') {
                            console.log('login')
                        } else if(newVal === '/register'){
                            console.log('register')
                            
                        }
                    }
                }
            })


        </script>
    </body>
</html>